<!--

@file: Carousel01.vue
@author: pan
-->
<script setup lang="ts">
defineOptions({ name: 'Carousel01.vue' })
</script>

<template>
  <div class="wrapper">
    <div class="container">
      <div class="item">卡片盒子1</div>
      <div class="item">卡片盒子2</div>
      <div class="item">卡片盒子3</div>
      <div class="item">卡片盒子4</div>
      <div class="item">卡片盒子5</div>
      <div class="item">卡片盒子6</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  width: 400px;
  height: 200px;
  box-sizing: border-box;
  border: 2px solid red;
  margin: 100px auto;
  /* 透视属性，使得旋转效果更符合物理直觉 */
  perspective: 800px;
}
.container {
  background-color: yellowgreen;
  width: 100%;
  height: 100%;
  /* 加入过渡效果，使得可以看到旋转的过程 */
  transition: transform ease 2s;
}
.wrapper:hover .container {
  /* 鼠标移入时旋转，盒子360°旋转就会形成半径为200px的一个圆 */
  transform: rotateY(-300deg);
}
.container {
  position: relative;
}
.container .item {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: lightblue;
  bottom: 0;
  left: 50%;
  margin-left: -100px;
  /* transform: translateX(-50%); */
}
.container {
  /* 使得子元素也有3d效果 */
  transform-style: preserve-3d;
}
.item:nth-child(6) {
  /* 将卡片盒子从圆心位置，沿着z轴，移动200px(即：圆的半径)，移动到圆的最外围 */
  transform: translateZ(200px);
  background-color: lightsalmon;
}
.item:nth-child(5) {
  /* 要呈圆形分布，那就要将卡片盒子旋转一定角度之后，再移动到圆的最外围，而如果要将卡片盒子均匀分布到圆上，每个卡片盒子的累加旋转角度就应该是 360°/卡片数量，所以第二个盒子的旋转角度为60° */
  /* 将卡片盒子从圆心位置，沿着z轴，移动200px(即：圆的半径)，移动到圆的最外围 */
  transform: rotateY(60deg) translateZ(200px);
  background-color: lightcoral;
}
.item:nth-child(4) {
  /* 要呈圆形分布，那就要将卡片盒子旋转一定角度之后，再移动到圆的最外围，而如果要将卡片盒子均匀分布到圆上，每个卡片盒子的累加旋转角度就应该是 360°/卡片数量，所以第二个盒子的旋转角度为120° */
  /* 将卡片盒子从圆心位置，沿着z轴，移动200px(即：圆的半径)，移动到圆的最外围 */
  transform: rotateY(120deg) translateZ(200px);
  background-color: lightpink;
}
</style>
